<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>rag-generator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #f9f9f9;
      --text: #212529;
      --card-bg: #ffffff;
      --input-bg: #e9ecef;
      --accent: #0d6efd;
    }

    .dark-mode {
      --bg: #121212;
      --text: #f1f1f1;
      --card-bg: #1e2a38;
      --input-bg: #2a3b4d;
      --accent: #00c9a7;
    }

    html,
    body {
      min-height: 100%;
      background-color: var(--bg);
      color: var(--text);
      font-family: "Roboto", sans-serif;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    .container {
      flex: 1;
      background-color: var(--bg);
    }

    h1 {
      font-weight: 800;
      font-size: 2.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .card {
      background-color: var(--card-bg);
      border: none;
      border-radius: 1rem;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .form-control,
    .form-select,
    textarea {
      background-color: var(--input-bg);
      color: var(--text);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0.5rem;
    }

    .form-control:focus,
    .form-select:focus,
    textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    label {
      font-weight: 600;
    }

    textarea {
      resize: vertical;
      min-height: 160px;
    }

    .loading {
      position: absolute;
      top: 50%;
      right: 1rem;
      transform: translateY(-50%);
    }

    .small-text {
      font-size: 0.75rem;
      opacity: 0.8;
    }

    .btn-group-responsive {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .progress-bar {
      background-color: var(--accent);
    }

    .toggle-mode {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 999;
    }

    @media (max-width: 576px) {
      .toggle-mode {
        top: auto;
        bottom: 1rem;
        right: 1rem;
      }

      .container {
        padding-top: 3rem;
      }

      h1 {
        font-size: 1.75rem;
      }

      .btn-group-responsive {
        flex-direction: column;
        align-items: stretch;
      }
    }

    html.dark-mode,
    body.dark-mode {
      background-color: var(--bg) !important;
    }

    .audio-disabled {
      pointer-events: none;
      opacity: 0.6;
    }
  </style>
</head>

<body>

  <button class="btn btn-sm btn-outline-secondary toggle-mode" onclick="toggleTheme()">Toggle thème</button>

  <main class="container p-2">
    <h1 class="text-center text-warning">rag-connector</h1>

    <div class="row g-3 mb-4">
      <div class="col-12 col-lg-7">
        <label class="form-label">Question libre</label>
        <textarea class="form-control" id="ragQuestion" rows="6"
          placeholder="Ex : Quels sont les thèmes récurrents dans les films de Christopher Nolan ?"></textarea>
      </div>

      <div class="col-12 col-lg-5">
        <div class="row g-3">
          <div class="col-6">
            <label class="form-label">Modèle</label>
            <select class="form-select" id="ragModel">
              <option value="chatgpt" selected>ChatGPT</option>
              <option value="claude">Claude</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label">Mode</label>
            <select class="form-select" id="ragMode">
              <option value="rag" selected>Avec RAG</option>
              <option value="direct">Sans RAG</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label">Style</label>
            <select class="form-select" id="ragStyle">
              <option value="neutral" selected>Neutre</option>
              <option value="cinematic">Cinématographique</option>
              <option value="humorous">Humoristique</option>
              <option value="technical">Technique</option>
              <option value="historical">Historique</option>
              <option value="poetic">Poétique</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label">Longueur</label>
            <select class="form-select" id="ragLength">
              <option value="short">Courte</option>
              <option value="medium" selected>Moyenne</option>
              <option value="long">Longue</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-4">
      <div class="col-md-12">
        <div class="card p-4 m-1">
          <div class="d-flex justify-content-between align-items-center mb-3 btn-group-responsive">
            <button class="btn btn-warning" onclick="callRag()">Générer</button>
            <button class="btn btn-outline-warning" onclick="resetRag()">Réinitialiser</button>
            <span class="badge bg-warning text-dark">Texte Ok ✓</span>
            <span class="text-warning small-text ms-auto" id="ragTime">En attente...</span>
          </div>
          <div class="position-relative">
            <div class="d-flex align-items-center gap-3">
              <div class="progress flex-grow-1">
                <div id="ragProgress" class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                  style="width: 0%">
                </div>
              </div>
              <div class="spinner-border text-warning d-none" id="ragSpinner" role="status"
                style="width: 1.5rem; height: 1.5rem;">
                <span class="visually-hidden">Chargement...</span>
              </div>
            </div>
            <div class="mt-3">
              <textarea class="form-control" id="ragResult" rows="3" placeholder="Réponse affichée ici..."></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <script>
    function toggleTheme() {
      document.body.classList.toggle('dark-mode');
      document.documentElement.classList.toggle('dark-mode');
    }
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>